<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>论坛</title>
    <script th:src="@{/airent/plugins/jquery/jquery.min.js}"></script>
    <script th:src="@{/airent/plugins/jquery-ui-1.12.1.custom/jquery-ui.min.js}"></script>
    <script th:src="@{/airent/plugins/bootstrap/bootstrap-4.4.1-dist/js/bootstrap.min.js}"></script>
    <link rel="stylesheet" th:href="@{/airent/plugins/bootstrap/bootstrap-4.4.1-dist/css/bootstrap.min.css}">
    <script  th:src="@{/airent/js/vue.js}"></script>


</head>
<body>

<div class="fixed-bottom">
    <div >
        <a href="/postArticle.html">
             <span href="javascript:viod(0)" class="text-success" >
                    <svg width="40" height="40" viewBox="0 0 16 16" class="bi bi-card-heading" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
  <path fill-rule="evenodd" d="M14.5 3h-13a.5.5 0 0 0-.5.5v9a.5.5 0 0 0 .5.5h13a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 0-.5-.5zm-13-1A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-13z"/>
  <path fill-rule="evenodd" d="M3 8.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5z"/>
  <path d="M3 5.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5v-1z"/>
</svg>
                </span>
        </a>
    </div>
</div>




<!--        头部-->
<div th:replace="~{head/topbar::topBar}"></div>
<!-- 导航栏 -->

<!--        头部结束-->
<div id="app" class="container">
    <h1 v-if="pages == 0">暂无内容，快去发表第一个帖子吧！</h1>

    <ul class="list-group list-group-flush">
        <li class="list-group-item" v-for="a in articles">
            <a href="/showOneAr.html" @click="getId(a.articleId)" v-text="a.articleTitle"></a>
        </li>
    </ul>


    <nav aria-label="Page navigation example">
        <ul class="pagination">
            <li class="page-item" v-if="pages != 0">
                <a class="page-link" href="#" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>
            <li class="page-item" v-for="i in pages"><a class="page-link" href="#" @click="go(i)">{{i}}</a></li>

            <li class="page-item" v-if="pages!=0">
                <a class="page-link" href="#" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
        </ul>
    </nav>
</div>
<script>
    var vueApp = new Vue({
        el: "#app",
        data:{
            articles:{},
            pageSize:0,
            pageNum:0,
            pages:0
        },
        created(){
            let url = '/article/query'
            $.get(url,{
                status:0
            },function (data) {
                console.log(data)
                vueApp.articles = data.list
                vueApp.pageSize = data.pageSize
                vueApp.pageNum = data.pageNum
                vueApp.pages = data.pages
            })

        },
        methods:{
            go:function (num) {
                $.get('/article/query',{
                    pageNum:num,
                    status:0
                },function (data) {
                    vueApp.articles = data.list
                    vueApp.pageSize = data.pageSize
                    vueApp.pageNum = data.pageNum
                    vueApp.pages = data.pages
                })
            },
            getId:function(id) {
                window.localStorage.setItem("id", id);
            }
        }


    })
</script>


</body>
</html>